<template>
  <div class='wipInfo'>
        <h3 class="wipInfoHead">{{titleName}}</h3>
        <el-divider class="wipdiv"></el-divider>
        <el-table :data="tableData" style="width: 100%" :stripe='true' :border='true' :highlight-current-row='true'
        :show-header="false" :cell-style="cellStyle">

        <el-table-column  align="center" label="key">
        <template slot-scope="{row}">
          <span>{{ row.key }}</span>
        </template>
        </el-table-column>

        <el-table-column  label="value">
          <template slot-scope="{row}">
          <span>{{ row.value }}</span>
        </template>
        </el-table-column>

        <el-table-column  label="key1">
          <template slot-scope="{row}">
          <span>{{ row.key1 }}</span>
        </template>
        </el-table-column>

        <el-table-column  label="value1">
          <template slot-scope="{row}">
          <span>{{ row.value1 }}</span>
        </template>
        </el-table-column>

        </el-table>
        <el-divider class="wipdiv"></el-divider>
        <el-tabs  v-model="activeKey" type="card" >
          <el-tab-pane  v-for="(item,i) in tabInfo" :key="i" :label="item.tabName" >
           <el-table v-for="(tableitem,j) in tabInfo[i].tableData" :key="j" :data="tableitem.row" style="width: 100%" 
            :stripe='true' :border='true' :highlight-current-row='true' :header-cell-style="{ 'background-color':'#2185d0','color':'#ffffff'}" 
            @row-click='handlerowclick'>   
            <el-table-column align="center" v-for="(headitem,k) in tableitem.head"  :key='k' :label="headitem.name" >
                <template slot-scope="{row}">
                  <span >{{ row.attribute[k] }}</span>
                </template>
            </el-table-column>
           </el-table>
        </el-tab-pane>
       </el-tabs>

  </div>
</template>

<script>
import ComponentSignals from '@/utils/componentSignals';


export default {
  name: 'wipInfo',
  data(){
    return {
        activeKey: '0',
        tableData:[],
        titleName:'',
        tabInfo:[]
    }
  },
  components: {},
  created(){},
  mounted(){
    ComponentSignals.setAttribute.add((data)=>
    {
      let table = [];
      let baseInfo=data.baseInfo;
      this.tabInfo=data.tabInfo;
      //
      let flag = Object.keys(baseInfo);
      if (flag.length===0)
      {
            return;
      }
      this.titleName=baseInfo.attributeName;
      let step = baseInfo.colSpan / 2;
      for (let i = 0; i < baseInfo.tableInfo.length; i += step) {
            let tmpObje={}
            for (let j = 0; j < step; j++) {
                if (i + j < baseInfo.tableInfo.length) {
                  let kValue=baseInfo.tableInfo[i + j].key;
                  let vValue=baseInfo.tableInfo[i + j].value;
                  if(j===0)
                  {
                    tmpObje.key=kValue;
                    tmpObje.value=vValue;
                  }
                  else if (j===1)
                  {
                    tmpObje.key1=kValue;
                    tmpObje.value1=vValue;
                  }
                }
            }
            table.push(tmpObje);
       }
      this.tableData=table;  
    });
    ComponentSignals.clear.add(()=>{
      this.tableData=[];
      this.titleName='';
      this.tabInfo=[];
    }
    );
  },
  methods: {
     cellStyle(row){
       if (row.column.label==="key" || row.column.label==="key1" ) {
         return 'font-weight:bold; background-color:#2185d0'
       }
     },
     handlerowclick(row, column, event)
     {
       if (row.hasOwnProperty('modelName')) {
         ComponentSignals.selectObjByName.dispatch(row.modelName);
       }
     }

  }
}
</script>
<style scoped>
.wipdiv{
  margin: 2px 0 ;
}

.wipInfo /deep/ .el-tabs__item
{
  background-color:#3399FF;
  color:#053949 !important;
}
.wipInfo /deep/ .el-tabs__item.is-active
{
  background-color:#3399FF;
   color:#ffffff !important;
}
.wipInfo /deep/ .el-table--small
{
  font-size: 14px;
  color:#ffffff;
}
.wipInfo /deep/ .el-table--mini
{
  font-size: 14px;
  color:#ffffff;
}
.wipInfoHead
{
    color:#ffffff;
}
.wipInfo /deep/ .el-table__body tr.current-row>td {
        background: #888080 !important;
}



.wipInfo /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color:#3399FF
}

.wipInfo /deep/  .el-table, .el-table__expanded-cell {
    background-color: #33CCFF;
}

.wipInfo /deep/ .el-table tr {
    background-color: #33CCFF!important;
}
.wipInfo /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
    background-color: #33CCFF;
}
</style>
